import { Modal, Form, Toast, Button } from "@douyinfe/semi-ui";
import { useRef } from "react";
import { addDrawdbUser, updateDrawdbUser } from "../../../api/request";
import { IconUpload } from "@douyinfe/semi-icons";

export default function Register(props) {
  const { visible, onCancel, type } = props;

  const getFormApi = useRef();

  const handleSubmit = () => {
    getFormApi.current
      .validate()
      .then(async (values) => {
        values.iconUrl = values?.iconUrl?.[0]?.response.data;

        if (type == "update") {
          const userData = JSON.parse(localStorage.getItem("userData"));
          values.id = userData.id;
          const result = await updateDrawdbUser(values);
          if (result.code === "00000") {
            Toast.success("修改成功");
            onCancel();
          }
        } else {
          const result = await addDrawdbUser(values);
          if (result.code === "00000") {
            Toast.success("注册成功");
            onCancel();
          }
        }
      })
      .catch((errors) => {
        console.log(errors);
      });
  };

  return (
    <Modal
      title={type == "update" ? "修改" : "注册新用户"}
      visible={visible}
      cancelText="取消"
      okText="保存"
      width={600}
      onOk={handleSubmit}
      onCancel={onCancel}
    >
      <Form
        className="z-50 mt-4"
        onSubmit={handleSubmit}
        labelWidth={100}
        getFormApi={(data) => {
          getFormApi.current = data;
        }}
      >
        <Form.Input
          labelPosition="left"
          field="realname"
          label="名称"
          placeholder="名称"
          rules={type == "update" ? [] : [{ required: true, message: "必填" }]}
        ></Form.Input>
        <Form.Upload
          labelPosition="left"
          field="iconUrl"
          label="头像"
          action={`${import.meta.env.VITE_API_DRWA_PREFIX}/minio/upload`}
          multiple={false}
          limit={1}
          name="file"
        >
          <Button icon={<IconUpload />} theme="light">
            点击上传
          </Button>
        </Form.Upload>
        <Form.Input
          labelPosition="left"
          field="email"
          label="邮箱"
          placeholder="邮箱"
        ></Form.Input>

        {type != "update" && (
          <Form.Input
            labelPosition="left"
            field="userName"
            label="账号"
            placeholder="请输入账号"
            rules={[{ required: true, message: "必填" }]}
          ></Form.Input>
        )}

        <Form.Input
          labelPosition="left"
          field="password"
          label="密码"
          type="password"
          rules={[
            type != "update" ? { required: true, message: "必填" } : {},
            {
              validator: (rule, value) => {
                if(type == "update" && value == null) return true;
                return /^(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(
                  value,
                );
              },
              message: "至少8个字符的长度,含小写字母,包括数字和符号",
            },
          ]}
          placeholder="请输入密码"
        ></Form.Input>
      </Form>
    </Modal>
  );
}
